<template>
  <div>
    <div class="xq">
      <div class="conter">
        <div class="main" v-if="data">
          <div
            class="left"
            v-for="{
              d_date,
              d_detail,
              d_id,
              d_read,
              d_title,
              d_writer,
            } in data"
            :key="d_id"
          >
            <div class="top">
              <h3>{{ d_title }}</h3>
              <div>
                <span>日期: {{ d_date }}</span>
                <span>作者: {{ d_writer }}</span>
                <span>阅读: {{ d_read }}</span>
              </div>
            </div>
            <div class="floor">
              <div v-html="d_detail"></div>
              <div class="shou">
                <img src="" alt="" />
                <img src="" alt="" />
              </div>
            </div>
            <div class="pinlun">
              <div class="f1">
                <div @click="n = 1" :class="{ active: n == 1 }">评论</div>
                <p></p>
                <div @click="n = 2" :class="{ active: n == 2 }">举报</div>
              </div>
              <div class="f2" v-if="tokens">
                <!-- 通过判断token的值, 判断用户是否登录 -->
                <!-- 有就显示评论文本框,没有就显示亲登录 -->
                <div v-show="n == 1">
                  <textarea
                    class="textarea"
                    cols="60"
                    rows="10"
                    placeholder="感谢您的评论"
                  >
                  </textarea>
                  <el-row>
                    <el-button type="danger" round> 提交评论→</el-button>
                  </el-row>
                </div>
                <div v-show="n == 2">
                  <textarea
                    class="textarea"
                    cols="60"
                    rows="10"
                    placeholder="感谢您的建议,为了您带来不便,我们感到很道歉"
                  >
                  </textarea>
                  <el-row>
                    <el-button type="danger" round>提交举报→</el-button>
                  </el-row>
                </div>
              </div>
              <div class="f3" v-else @click="goLogin">请登录</div>
            </div>
          </div>
          <div class="you">
            <div class="side-top">
              <div>
                <h3>猜你想找</h3>
                <a href="#">查看等多></a>
              </div>
              <div>
                <ul>
                  <li>
                    <a href=""> <span>热</span>#金犀奖</a>
                    <a href=""> <span>热</span>#属羊婚配属相</a>
                  </li>
                  <li>
                    <a href=""> <span>热</span>#金犀奖</a>
                    <a href=""> <span>热</span>#属羊婚配属相</a>
                  </li>
                  <li>
                    <a href=""> <span>热</span>#金犀奖</a>
                    <a href=""> <span>热</span>#属羊婚配属相</a>
                  </li>
                  <li>
                    <a href=""> <span>热</span>#金犀奖</a>
                    <a href=""> <span>热</span>#属羊婚配属相</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="side-middle">
              <h3>结婚美图</h3>
              <ul>
                <li>
                  <img
                    src="https://qnm.hunliji.com/o_1dd2uhha81889tepbn41m701se2f.png"
                    alt=""
                  />
                  <span>婚纱照</span>
                </li>
                <li>
                  <img
                    src="https://qnm.hunliji.com/o_1dd2uhha81889tepbn41m701se2f.png"
                    alt=""
                  />
                  <span>婚纱照</span>
                </li>
                <li>
                  <img
                    src="https://qnm.hunliji.com/o_1dd2uhha81889tepbn41m701se2f.png"
                    alt=""
                  />
                  <span>婚纱照</span>
                </li>
                <li>
                  <img
                    src="https://qnm.hunliji.com/o_1dd2uhha81889tepbn41m701se2f.png"
                    alt=""
                  />
                  <span>婚纱照</span>
                </li>
              </ul>
            </div>
            <div class="side-floor">
              <div class="f1">
                <div @click="now = 1" :class="{ active: now == 1 }">最新</div>
                <p></p>
                <div @click="now = 2" :class="{ active: now == 2 }">最热</div>
              </div>
              <div class="f2">
                <ul v-show="now == 1">
                  <li>●儿媳妇敬茶时</li>
                  <li>●儿媳妇敬茶时婆婆怎么对儿媳妇说111111</li>
                  <li>●儿媳妇敬茶时婆婆怎么对儿媳妇说111111</li>
                  <li>●儿媳妇敬茶时婆婆怎么对儿媳妇说111111</li>
                  <li>●儿媳妇敬茶时婆婆怎么对儿媳妇说</li>
                  <li>●儿媳妇敬茶时婆婆怎么对儿媳妇说</li>
                </ul>
                <ul v-show="now == 2">
                  <li>●结婚时新娘朋友圈发的说说</li>
                  <li>●结婚时新娘朋友圈发的说说111111</li>
                  <li>●结婚时新娘朋友圈发的说说222222</li>
                  <li>●结婚时新娘朋友圈发的说说333333</li>
                  <li>●结婚时新娘朋友圈发的说说444444</li>
                  <li>●结婚时新娘朋友圈发的说说5555555</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "",
      now: "1",
      n: 1,
      tokens: null,
    };
  },
  mounted() {
    //使用getItem或者属性形式
    this.tokens = sessionStorage.getItem("token");
    let id = this.$route.query.id;
    console.log(this.$route);
    const url = `/comRouter/compass/detail1?d_id=${id}`;
    this.axios.get(url).then(res => {
      console.log(res);
      this.data = res.data;
    });
  },
  methods: {
    goLogin() {
      this.$router.push({ path: "/Login", query: { idd: 1 } });
    },
  },
};
</script>

<style lang="scss" scoped>
.conter {
  width: 1200px;
  margin: 50px auto 0;
  .main {
    display: flex;
    user-select: none;
    .left {
      width: 820px;
      user-select: none;
      .top {
        margin-bottom: 40px;
        border-bottom: 1px solid #ddd;
        // padding: 15px 0;
        h3 {
          text-align: center;
          font-size: 33px;
        }
        div {
          text-align: center;
          font-size: 15px;
          color: #666666;
          span {
            display: inline-block;
            margin: 15px 10px 15px 0;
          }
        }
      }
      .pinlun {
        margin: 50px 0;
        .f1 {
          display: flex;
          div {
            position: relative;
            font-size: 25px;
            font-weight: normal;
          }
          div:hover {
            color: red;
          }
          .active {
            color: red;
          }
          > p {
            border-right: 1px solid #ccc;
            display: inline-block;
            height: 25px;
            margin: 0 15px;
          }
        }
        .f2 {
          position: relative;
          box-shadow: 0px 4px 28px rgb(0 0 0 / 12%);
          textarea {
            outline: none;
            border: none;
            padding: 20px;
            font-size: 20px;
            resize: none;
          }
        }
        .f3 {
          cursor: pointer;
        }
        .f3:hover {
          color: red;
          text-decoration: underline;
        }
      }
    }

    .you {
      margin-left: 75px;
      .side-top {
        width: 400px;
        h3 {
          font-size: 25px;
          font-weight: normal;
          display: inline-block;
        }
        div:nth-child(1) a {
          color: #333333;
          margin-left: 145px;
          font-size: 15px;
        }
        div:nth-child(1) a:hover {
          color: red;
        }
        ul {
          /* box-sizing: border-box; */
          background-color: #fff;
          width: 320px;
          border: 1px solid #f0f0f0;
          /* box-shadow: 0px 5px #f1f1f1; */
          /* padding: 20px; */
          border-radius: 6px;
          box-shadow: 0px 4px 28px rgb(0 0 0 / 12%);
          li {
            margin: 20px;
            span {
              background-color: #f83244;
              color: #fff;
              font-size: 12px;
              border-radius: 3px;
              padding: 2px 3px;
            }
            a {
              color: #333;
              font-size: 14px;
            }
            a:hover {
              color: red;
            }
            a:last-child {
              margin-left: 80px;
            }
          }
        }
      }
      .side-middle {
        cursor: pointer;

        h3 {
          font-size: 25px;
          font-weight: normal;
          display: block;
          margin: 20px 0;
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          width: 300px;
          background-color: #fbfbfb;
          padding: 10px;
          border-radius: 8px;
          box-shadow: 0px 4px 28px rgb(0 0 0 / 12%);
          li {
            width: 120px;
            background-color: #fff;
            display: flex;
            padding: 10px;
            margin-bottom: 15px;
            img {
              width: 45px;
            }
            span {
              font-size: 18px;
              font-weight: 550;
              margin: auto 10px;
            }
          }
          li:hover {
            opacity: 0.8;
            color: red;
          }
        }
      }
      .side-floor {
        .f1 {
          display: flex;
          margin: 10px 0;
          div {
            font-size: 25px;
            color: #000;

            cursor: pointer;
          }
          .active {
            color: red;
          }
          div:hover {
            color: red;
          }
          > p {
            border-right: 1px solid #ccc;
            display: inline-block;
            height: 25px;
            margin: 0 15px;
          }
        }

        .f2 {
          box-sizing: border-box;
          width: 315px;
          background-color: #fbfbfb;
          box-shadow: 0px 4px 28px rgb(0 0 0 / 12%);
          ul {
            // width: 250px;
            background-color: #fff;
            border-radius: 8px;
            padding-bottom: 30px;
            li {
              padding: 25px 25px 0;
              // width: 250px;
              font-size: 15px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              font-weight: normal;
              cursor: pointer;
              user-select: none;
            }
            li:hover {
              color: red;
            }
          }
        }
      }
    }
  }
}

// 富文本修改css样式
//1.穿透 ::v-deep
//2.去除 scoped
::v-deep .rc-main {
  padding-bottom: 50px;
  border-bottom: 1px solid #ddd;

  p:first-child {
    display: inline-block;
    // margin: 35px 0 15px;
  }
  img {
    margin: 0 auto;
    border-radius: 10px;
    max-width: 640px;
  }
  .baike_baike {
    // box-sizing: border-box;
    padding: 30px;
    margin-bottom: 100px;
    width: 725px;
    background-color: #f6f6f7;
    font-size: 16px;
    font-weight: bold;
    li {
      /* 修改li标签前面点的颜色 */
      /* 加;li标签 · 的样式 */
      list-style: disc;
      content: "·";
      color: gray;
      margin: 15px 0 0 18px;
    }
    a {
      display: inline-block;
      // padding-top: 10px;
      cursor: pointer;
      color: #333333;
      font-size: 16px;
      font-weight: normal;
    }
  }
}
::v-deep.el-row {
  position: relative;
  button {
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
}
</style>
